<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <style>
    #container {
      width: 600px;
      height: 400px;
      position: absolute;
      background: black;
    }
  </style>
  <script src="https://s2.ssl.qhres.com/!87edaa34/animator-0.3.1.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <script src="/js/spritejs.js"></script>
  <script>
    const imageFrameData = {"frames": {
    "bird1.png":
    {
      "frame": {"x":2,"y":126,"w":86,"h":60},
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": {"x":0,"y":0,"w":86,"h":60},
      "sourceSize": {"w":86,"h":60}
    },
    "bird2.png":
    {
      "frame": {"x":2,"y":64,"w":86,"h":60},
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": {"x":0,"y":0,"w":86,"h":60},
      "sourceSize": {"w":86,"h":60}
    },
    "bird3.png":
    {
      "frame": {"x":2,"y":2,"w":86,"h":60},
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": {"x":0,"y":0,"w":86,"h":60},
      "sourceSize": {"w":86,"h":60}
    }},
    "meta": {
      "app": "http://www.codeandweb.com/texturepacker ",
      "version": "1.0",
      "image": "birds.png",
      "format": "RGBA8888",
      "size": {"w":128,"h":256},
      "scale": "1",
      "smartupdate": "$TexturePacker:SmartUpdate:1d1900abc513a35465bc91ec5b5cb8cb:13c6a8c39622cb3a3793e80870b1c992:05064d7bb83a0e2b52752dd6e3168bce$"
    }
    }


    ;(async function(){
      const paper = spritejs.Paper2D('#container', 600, 400)
      
      const Sprite = spritejs.Sprite,
            Label = spritejs.Label
      
      let res = await paper.preload(['https://p.ssl.qhimg.com/d/inn/c886d09f/birds.png', 
                           imageFrameData])
      

      const button = new Label('点我开始')
      const layer = paper.layer()
      
      button.attr({
        pos: [10, 10],
        bgcolor: 'rgba(255,255,255,0.5)',
        borderRadius: 5,
        padding: 6,
        color: '#111',
        font: '16px/16px Arial'
      })
      
      const bird = new Sprite()

      bird.attr({
        anchor: [0.5, 0.5],
        pos: [100, 100],
        opacity: 0.7,
        scale: 0.5,
        //bgcolor: 'green',
        padding: [0,0,0,0],
      })
      window.bird = bird

      bird.textures = ['bird1.png']
      
      layer.append(button, bird);

      const a1 = new Animator(3000,  function(p){
        var ty = 200 * p
        bird.attr('pos', [100 + ty, 100 ])
      })

      button.on('mouseenter', function(evt){
        evt.layer.canvas.style.cursor = 'pointer'
      })

      button.on('mouseleave', function(evt){
        evt.layer.canvas.style.cursor = 'default'
      })

      button.on('mousedown', function(evt){
        evt.target.attr({
          color: '#f99'
        })
      })

      layer.on('mouseup', function(evt){
        button.attr({
          color: '#111'
        })
      })

      button.on('click', function(evt){
        a1.animate()
      })

      let textureIdx = 0
      setInterval(function(){
        const src = `bird${++textureIdx % 3 + 1}.png`
        bird.textures = [src]
      }, 100);
    })()
  </script>
</body>
</html>